<template>
  <div>
    <!-- <div class="active-img" @click="jumpTo('/packageA/pages/active/index')">
      <img mode="aspectFit"
        src="https://cxj.szzkba.cn/up/uploadPath/2023/10/25/8fd59d10de713dc5246cdd87b18998220231025094823.png" alt="">
    </div> -->
    <div class="news-title flex-a"><span>限时抢购</span><span class="en">FLASH SALE</span></div>
    <div class="goods-list">
      <div class="goods-item" v-for="item in state.goodsList" :key="item.goodsId"
        @click="jumpTo('/packageA/pages/productDetail/index?goodsId=' + item.goodsId)">
        <div class="img"><img :src="item.goodsCoverImg" mode="aspectFit" alt=""></div>
        <div class="title">{{ item.goodsName }}</div>
        <!-- <div class="time"><nut-countdown :end-time="state.end" /></div> -->
        <div class="bottom">
          <img src="https://cxj.szzkba.cn/up/uploadPath/2023/10/26/road20231026133749.png" mode="widthFix" alt="">
          <span class="sell">￥{{ item.sellingPrice }}</span>
          <span class="orig">￥{{ item.originalPrice }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts">
import Taro from '@tarojs/taro'
import { reactive, onMounted } from 'vue';
import { getNewGoods } from '../../../api/index'
export default {
  setup() {
    const state = reactive({
      goodsList: [],
      end: Date.now() + 30 * 60 * 1000
    });
    onMounted(() => {
      getNewGoods().then(res => {
        if (res.resultCode == 200) {
          state.goodsList = res.data
        }
      })
    });
    const jumpTo = (url) => {
      Taro.navigateTo({ url: url });
    }
    return { state, jumpTo };
  }
};
</script>
<style lang="scss" >
.active-img {
  text-align: center;

  img {
    width: 100%;
    height: 260px;
  }
}

.news-title {
  // width: 90%;
  margin: 0 auto 20rpx;
  font-size: 36rpx;
  box-sizing: border-box;
  padding-left: 10rpx;
  font-weight: bold;
  color: #BE0A01;

  .en {
    margin-left: 30rpx;
    font-size: 28rpx;
  }
}

.goods-list::-webkit-scrollbar {
  display: none;
}

.goods-list {
  overflow-x: auto;
  width: 98%;
  margin: 0 auto;
  white-space: nowrap;

  .goods-item {
    display: inline-block;
    margin-right: 10rpx;
    border-radius: 15rpx;
    width: 40%;
    height: 300rpx;
    background: url(http://120.92.155.169:9095/uploadPath/2023/10/26/120231026105834.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;

    .img {
      background: #fff;
      text-align: center;
      height: 250rpx;
      transform: scale(0.9);

      img {
        width: 100%;
        height: 100%;
      }
    }

    .time {
      position: absolute;
      right: 10rpx;
      bottom: 0rpx;
      color: #fff;

      .nut-countdown__content {
        font-size: 20rpx;
      }
    }

    .title {
      width: 70%;
      font-size: 20rpx;
      font-weight: bold;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: absolute;
      right: -20rpx;
      // bottom: 30rpx;
      bottom: 15rpx;
      color: #F8DBB1;
    }

    .bottom {
      width: 110rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      bottom: 0;

      .sell {
        font-weight: bold;
        font-size: 32rpx;
        color: #F8DBB1;
        position: absolute;
        z-index: 9;
        top: 10rpx;
        left: 2rpx;
      }

      .orig {
        color: #fff;
        margin-left: 10rpx;
        text-decoration: line-through;
        font-size: 24rpx;
        position: absolute;
        z-index: 9;
        bottom: 5rpx;
        left: 20rpx;
      }

      img {
        width: 110rpx;
        position: absolute;
        z-index: 1;
      }
    }
  }
}
</style>